<template>
  <div class="login-container">
    <!-- 图标 -->
    <div class="bgc-color">
      <img class="lt" src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0%E7%99%BB%E9%99%86%E9%A1%B5/u3.png" alt="">
      <img class="middle" src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0%E7%99%BB%E9%99%86%E9%A1%B5/u25.png" alt="">
      <img class="lb" src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0%E7%99%BB%E9%99%86%E9%A1%B5/u5.png" alt="">
      <img class="rt" src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0%E7%99%BB%E9%99%86%E9%A1%B5/u4.png" alt="">
    </div>
    <!-- 表单 -->
    <el-card class="box">
      <img src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0%E7%99%BB%E9%99%86%E9%A1%B5/u24.png" alt="">
      <h2 style="color:#438dee">人力资源后台管理</h2>
      <div class="form">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
          <el-form-item prop="mobile">
            <el-input v-model="loginForm.mobile" prefix-icon="el-icon-user" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" show-password placeholder="请输入密码" />
          </el-form-item>
          <el-form-item prop="sub">
            <el-input v-model="loginForm.sub" prefix-icon="el-icon-loading" placeholder="请输入验证码">
              <template slot="append"><span class="span" @click="fn1">{{ loginForm.mood }}</span></template>
            </el-input>

          </el-form-item>
          <el-form-item prop="isAgree">
            <el-checkbox v-model="loginForm.isAgree">用户平台使用协议</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 350px;" type="primary" @click="loginClick">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

  </div>
</template>

<script>

export default {
  data() {
    return {
      loginForm: {
        mobile: '',
        password: '',
        isAgree: false,
        sub: '',
        mood: '9527'
      },

      loginRules: {
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 16, message: '密码格式不正确', trigger: 'blur' }
        ],
        isAgree: [
          {
            validator: (rule, value, callback) => {
              value ? callback() : callback(new Error('请勾选用户协议'))
            }
          }
        ],
        sub: [
          { required: true, message: '验证码不能为空', trigger: 'blur' },
          { pattern: /^[1-9]{4}$/, message: '验证码格式不正确', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    loginClick() {
      this.$refs.loginForm.validate((isOk) => {
        if (isOk) {
          alert('校验通过')
          this.$store.dispatch('user/loginAction', this.loginForm)
          // console.log(this.loginForm)
        }
      })
    },
    fn1() {
      // console.log(555)
      const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
      const mood = arr[Math.floor(Math.random() * 9)]
      console.log(mood)
      this.loginForm.mood = mood
    }
  }
}
</script>

<style>
.login-container {

  position: relative;
  height: 100%;
  background-image: linear-gradient(#3fccfd, #996cfb);
  overflow: hidden;
}
.rt{
    position: absolute;
    top:-200px;
    right: -100px;
}
.lb{
  position: absolute;
  bottom: -250px;
  left: -250px;
}
.lt{
  position: absolute;
  left:50px;
  top:20px;
  opacity: 0.3;
}
.middle{
  position: absolute;
  left: 650px;
  top:300px
}

.box {
  /* padding-top: 50px; */
  position: absolute;
  left: 60%;
  top: 30%;

  display: flex;
  /* padding-left: 50px; */
  align-items: center;
  width: 400px;
  height: 450px;
  background-color: #fff;
}

.form {
  margin-top: 60px;
}

h2 {
  position: absolute;
  left: 20%;
  top: 0;
  font-size: 30px;
}

el-input {
  width: 350px;
}
.span{
  color:orange
}
</style>
